<template>
  <box2 title="能耗统计" class="gridarea">
    <div class="__content">
      <b2 type="elec" :data="electricityData" :rate="rate"/>
      <b2 type="gas" :data="gasData" :rate="rate"/>
      <b2 type="water" :data="waterData" :rate="rate"/>
    </div>

  </box2>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps } from 'vue'
import b2 from './blockN.vue'
import { getEnergyStatistics } from '@/api/dataBoard'
import box2 from '../../../compNew/box2.vue';
import * as formatLocalData from '../formatLocalData';

const props = defineProps<{
  isComp: boolean
}>()
const loadingRef = ref(false)
const electricityData = ref({})
const gasData = ref({})
const waterData = ref({})
const rate = ref(5000)
const getRate = async () => {
  const rates = await formatLocalData.getRate();
  rate.value = rates['energy'];
}
onMounted(() => {
  getData();
  getRate();
})

const getData = async () => {
  loadingRef.value = true
  let res;
  if (props.isComp) {
    res = await formatLocalData.getEnergy();
  } else {
    res = await getEnergyStatistics();
  }
  loadingRef.value = false
  if (res) {
    const { electricity, gas, water } = res
    electricityData.value = electricity
    gasData.value = gas
    waterData.value = water
  }
}
</script>

<style lang="scss" scoped>
.gridarea{
  grid-row: d;
  @media screen and (max-width: 800px) {
    height: 70vh!important;
  }
}
.__content {
  height: 100%;
  padding-top: 0.5vh;
  padding-bottom: 1vh;
}
</style>
